<template>
  <div class="page-orderinfo py-[24px]">
    <div class="m-auto w">
      <n-breadcrumb separator=">">
        <n-breadcrumb-item>
          <div class="trigger" @click="router.push('/')">
            {{ $t("title.首页") }}
          </div>
        </n-breadcrumb-item>
        <n-breadcrumb-item>
          <div class="trigger" @click="router.push('/uc/orderList')">
            {{ $t("button.我的订单") }}
          </div>
        </n-breadcrumb-item>
        <n-breadcrumb-item>
          <div class="trigger">{{ $t("title.订单详情") }}</div>
        </n-breadcrumb-item>
      </n-breadcrumb>

      <div class="flex bg-white h-[268px] box">
        <div
          class="left-wrapper flex justify-center w-[25%] border-r-[2px] border-0 border-r-[#F6F6F6] border-dashed px-[60px] py-[24px]"
        >
          <div>
            <div class="text-[#5C5C5C] text-[14px] font-light text-center">
              {{ $t(`common.订单号`) }} {{ order.id }}
            </div>

            <div
              class="text-[--main-color] text-[18px] font-normal text-center mt-[24px]"
              v-if="order?.status > -1"
            >
              {{ $t(`orderStatus.${ORDER_STATUS[order.status]}`) }}
            </div>

            <template v-if="firstStepWaitPay(order.status)">
              <div class="flex text-center">
                <div
                  class="flex items-center gap-1 m-auto text-[#5C5C5C] text-[14px] font-light"
                >
                  <n-icon class="">
                    <Time></Time>
                  </n-icon>
                  <n-countdown
                    :duration="
                      dayjs(order.createdDate).add(1, 'day').diff(dayjs(), 'millisecond')
                    "
                  />
                </div>
              </div>

              <div class="mt-[16px]">
                <n-button type="primary" round block @click="onClickPayOrder(false)">
                  {{ $t("button.立即支付") }}
                </n-button>
              </div>
              <div class="mt-[16px]">
                <n-popconfirm
                  @positive-click="onClickCancelOrder"
                  :positive-text="$t('button.确定')"
                  :negative-text="$t('button.取消')"
                >
                  <template #trigger>
                    <n-button type="primary" ghost round block>
                      {{ $t("button.取消订单") }}
                    </n-button>
                  </template>
                  {{ $t("confirm.取消订单") }}
                </n-popconfirm>
              </div>
            </template>
            <template v-else-if="secondStepPaied(order.status) && order.status != 3">
              <div class="text-[#5C5C5C] font-[300] text-[18px] mt-4">
                <n-button type="primary" round @click="messageDialogRef.show()">
                  {{ $t("button.确认收货") }}
                </n-button>
                <messageDialog ref="messageDialogRef" :width="600">
                  <div>
                    <div class="text-center text-[18px]">
                      <div class="text-[--main-color] font-[400] mt-[16px]">
                        {{ $t("confirm.确认收货") }}
                      </div>
                      <div
                        class="text-[16px] text-left text-[#3D3D3D] font-[300] mt-[16px]"
                      >
                        Para garantizar sus derechos y beneficios postventa, después de
                        recibir el producto, revise si todo coincide con el pedido. Si hay
                        problemas después de la recepción y usted aún no lo ha confirmado,
                        le ayudaremos a realizar la devolución u otros servicios. Confirme
                        que todo esté correcto antes de confirmar la recepción. Gracias
                        por su comprensión. Haga clic para consultar la
                        <span
                          @click="goArtical('Política de Quejas')"
                          class="cursor-pointer text-[--main-color]"
                        >
                          política de posventa
                        </span>
                        .
                      </div>
                    </div>
                    <div class="flex justify-center my-[32px] gap-8">
                      <n-button
                        type="primary"
                        class="w-[200px]"
                        @click="confirmOrderHandler"
                      >
                        {{ $t("button.确认收货") }}
                      </n-button>
                      <n-button
                        type="primary"
                        ghost
                        class="w-[200px]"
                        @click="messageDialogRef.close()"
                      >
                        {{ $t("button.返回上一步") }}
                      </n-button>
                    </div>
                  </div>
                </messageDialog>
              </div>
            </template>
            <template v-else-if="order.status == 8">
              <n-button type="" round :disabled="true">
                {{ $t("button.立即支付") }}
              </n-button>
            </template>
            <template v-else-if="secondStepWaitPay(order.status)">
              <n-button type="primary" round @click="onClickPayOrder(order, true)">
                {{ $t("button.立即支付") }}
              </n-button>
            </template>

            <!-- <template v-else-if="secondStepWaitPay(order.status)">
              <div class="flex text-center">
                <div
                  class="flex items-center gap-1 m-auto text-[#5C5C5C] text-[14px] font-light"
                >
                  <money :money="order.secondFee / 100" :is-cny="false" :rate="1"></money>
                </div>
              </div>

              <div class="mt-[16px]">
                <n-button type="primary" round block @click="onClickPayOrder(true)">
                  {{ $t("button.立即支付") }}
                </n-button>
              </div>
            </template> -->
          </div>
        </div>
        <div class="flex-1 px-[60px] py-[24px] flex items-center relative">
          <div
            v-if="firstStepWaitPay(order.status)"
            class="text-[14px] text-[#5C5C5C] font-[300] absolute top-[24px] px-[60px] inset-0"
          >
            {{ $t("tips.超时取消订单") }}
          </div>
          <div
            v-else-if="order.status == 8"
            class="text-[14px] text-[#5C5C5C] font-normal absolute top-[24px] px-[60px] inset-0"
          >
            {{ $t("tips.等待确认") }}
          </div>
          <div class="step-wrapper">
            <div class="step-item active">
              <div class="step-item-wrapper">
                <n-icon :size="24">
                  <LicenseDraft></LicenseDraft>
                </n-icon>
                <div>
                  {{ $t("common.创建订单") }}
                </div>
                <div class="time">{{ order.createdDate }}</div>
              </div>
              <div class="line"></div>
            </div>
            <div class="step-item" :class="firstStepPaied(order.status) ? 'active' : ''">
              <div class="step-item-wrapper">
                <n-icon :size="24">
                  <Purchase></Purchase>
                </n-icon>
                <div>{{ $t("step.订单费用") }}</div>
                <div class="time" v-if="firstStepPaied(order.status)">
                  {{ logs.find((x) => x.type == 1)?.time }}
                </div>
              </div>
              <div class="line"></div>
            </div>
            <div
              class="step-item"
              v-if="order.logisticsSelfCare == false"
              :class="secondStepPaied(order.status) ? 'active' : ''"
            >
              <div class="step-item-wrapper">
                <n-icon :size="24">
                  <Purchase></Purchase>
                </n-icon>
                <div>{{ $t("step.服务费用") }}</div>
                <div class="time">{{ logs.find((x) => x.type == 10)?.time }}</div>
              </div>
              <div class="line"></div>
            </div>
            <div
              class="step-item"
              v-if="order.logisticsSelfCare == false"
              :class="secondStepPaied(order.status) ? 'active' : ''"
            >
              <div class="step-item-wrapper">
                <n-icon :size="24">
                  <DeliveryTruck></DeliveryTruck>
                </n-icon>
                <div>{{ $t("step.运输中") }}</div>
                <div class="time">{{ logs.find((x) => x.type == 10)?.time }}</div>
              </div>
              <div class="line"></div>
            </div>
            <div class="step-item" :class="order.status == 3 ? 'active' : ''">
              <div class="step-item-wrapper">
                <n-icon :size="24">
                  <Task></Task>
                </n-icon>
                <div>{{ $t("orderStatus.已完成") }}</div>
                <div class="time">{{ logs.find((x) => x.type == 3)?.time }}</div>
              </div>
              <div class="line"></div>
            </div>
          </div>
        </div>
      </div>
      <div class="mt-6 bg-white h-[268px] flex box">
        <div
          v-if="address"
          class="text-[#303030] left-wrapper text-[16px] font-light flex w-[25%] border-r-[2px] border-0 border-r-[#F6F6F6] border-dashed px-[24px] py-[24px]"
        >
          <div class="">
            <div class="flex gap-2">
              <div>
                <n-icon class="text-[--main-color]">
                  <UserFilled></UserFilled>
                </n-icon>
              </div>
              <div>
                <div>
                  {{ address.fullName }}
                </div>
                <div>
                  {{ address.phone }}
                </div>
              </div>
            </div>

            <div class="flex gap-2 mt-4">
              <div>
                <n-icon class="text-[--main-color]">
                  <LocationFilled></LocationFilled>
                </n-icon>
              </div>
              <div>
                <div>
                  {{ address.address }}
                </div>
                <div>
                  {{ address.areaText }}
                </div>
                <div>
                  {{ address.cityText }},{{ address.provinceText }},{{ address.postCode }}
                </div>
              </div>
            </div>
            <div class="flex items-center gap-2 mt-4">
              <n-icon class="text-[--main-color]">
                <EarthAmericasFilled></EarthAmericasFilled>
              </n-icon>

              <div
                v-if="order.warehouse && JSON.parse(order.warehouse)?.transportType >= 0"
              >
                <div>
                  {{
                    JSON.parse(order.warehouse).transportType == 1
                      ? $t("submitOrder.空运")
                      : $t("submitOrder.海运")
                  }}
                </div>
              </div>
            </div>
          </div>
        </div>

        <div class="p-[24px] flex-1">
          <n-scrollbar style="height: 100%">
            <div class="timeline-wrapper">
              <div class="timeline-item" v-for="item in logs" :key="item.id">
                <div>{{ item.time }}</div>
                <div v-if="item.type >= 0">
                  {{ $t(`timeline[${item.type}]`) }}
                </div>
                <div v-else>{{ item.logisticsText }}</div>
              </div>
              <!-- <div class="timeline-item">
                <div>{{ order.createdDate }}</div>
                <div>{{ $t("step.订单创建") }}</div>
              </div>

              <div class="timeline-item" v-if="firstStepPaied(order.status)">
                <div>{{ order.createdDate }}</div>
                <div>{{ $t("step.等待确认") }}</div>
              </div> -->
            </div>
          </n-scrollbar>
        </div>
      </div>

      <div class="flex mt-6 text-[18px] font-light text-[#5C5C5C] gap-2">
        <div class="text-[--main-color]">{{ $t("common.阶段") }} 1:</div>
        <div>{{ $t("step.订单费用") }}</div>
      </div>
      <div class="mt-2 bg-white text-[#303030]">
        <tableGoods
          v-model:productList="goodsList"
          :allow-delete="false"
          :readonly="true"
        ></tableGoods>

        <div class="flex items-center">
          <div class="flex-1 p-[30px] text-right text-[18px] text-[--main-color]">
            {{ $t("common.实际付款") }}
          </div>
          <div class="p-[30px] w-[180px] amount-wrapper">
            <!-- <div class="">
              <div class="flex-1">{{ $t("common.订单金额") }}</div>
              <div>
                <money
                  :money="order.totalAmount / 100 || 0"
                  :is-cny="true"
                  :rate="order.currencyRate"
                ></money>
              </div>
            </div> -->
            <!-- <div class="">
              <div class="flex-1">{{ $t("common.阿里运费") }}</div>
              <div>
                <money :money="order.totalAliPostFee / 100 || 0" :is-cny="false"></money>
              </div>
            </div> -->
            <div class="flex justify-end pr-[12px]">
              <money
                class="text-[--main-color] ont-normal"
                :money="order.totalAmount / 100 + order.totalDiscount / 100"
                :is-cny="false"
                :rate="order.currencyRate"
              ></money>
            </div>
            <!-- <div class="">
              <div class="flex-1">{{ $t("common.二阶段费用") }}</div>
              <div>
                <money :money="order.secondFee / 100" :is-cny="false" :rate="1"></money>
              </div>
            </div> -->
            <!-- <div class="" v-if="order.insurance > 0">
              <div class="flex-1">{{ $t("common.保险费") }}</div>
              <div>
                <money
                  :money="order.insurance / 100"
                  :is-cny="false"
                  :rate="order.currencyRate"
                ></money>
              </div>
            </div>
            <div class="" v-if="order.qualityInspectionFee > 0">
              <div class="flex-1">{{ $t("common.质检费用") }}</div>
              <div>
                <money
                  :money="order.qualityInspectionFee / 100"
                  :is-cny="false"
                  :rate="order.currencyRate"
                ></money>
              </div>
            </div>
            <div class="">
              <div class="flex-1">{{ $t("common.清关费用") }}</div>
              <div>
                <money
                  :money="order.clearanceFee / 100"
                  :is-cny="false"
                  :rate="order.currencyRate"
                ></money>
              </div>
            </div>

            <div class="" v-if="order.overseasExpressFee > 0">
              <div class="flex-1">{{ $t("common.墨西哥运费") }}</div>
              <div>
                <money
                  :money="order.overseasExpressFee / 100"
                  :is-cny="false"
                  :rate="1"
                ></money>
              </div>
            </div> -->
            <!-- <div class="" v-if="order.totalDiscount > 0">
              <div class="flex-1">{{ $t("common.优惠金额") }}</div>
              <div>
                <money
                  :money="0 - order.totalDiscount / 100"
                  :is-cny="false"
                  :rate="order.currencyRate"
                ></money>
              </div>
            </div>
            <div class="text-[--main-color]">
              <div class="flex-1">{{ $t("common.实际支付") }}</div>
              <div>
                <money
                  :money="
                    (order.totalAmount / 100) * order.currencyRate + order.secondFee / 100
                  "
                  :is-cny="false"
                  :rate="1"
                ></money>
              </div>
            </div> -->
          </div>
        </div>
      </div>
      <template v-if="order.logisticsSelfCare == false">
        <div class="flex mt-6 text-[18px] font-light text-[#5C5C5C] gap-2">
          <div class="text-[--main-color]">{{ $t("common.阶段") }} 2:</div>
          <div>{{ $t("step.服务费用") }}</div>
        </div>
        <div class="mt-2 bg-white text-[#303030]">
          <n-table class="table-wrapper" :bordered="false" single-column>
            <thead>
              <tr class="">
                <th class="w-[360px]">{{ $t("common.服务") }}</th>
                <th class="">{{ $t("common.描述") }}</th>
                <th class="w-[180px]">
                  <div class="pr-[42px] text-right">
                    {{ $t("common.金额") }}
                  </div>
                </th>
              </tr>
            </thead>
            <tbody class="text-[18px] font-[300]">
              <tr class="">
                <td class="text-center">{{ $t("common.保险费") }}</td>
                <td class="">
                  {{ $t("submitOrder.保险费用说明") }}
                </td>
                <td class="">
                  <div class="flex justify-end pr-[30px]">
                    <money
                      v-if="computedFase2Amount()"
                      :money="order.insurance / 100"
                      :is-cny="false"
                      :rate="order.currencyRate"
                    ></money>
                    <div v-else>
                      <template v-if="order.status == 7">-</template>
                      <template v-else>{{ $t("orderStatus.待审核") }}</template>
                    </div>
                  </div>
                </td>
              </tr>
              <tr class="">
                <td class="text-center">{{ $t("common.服务费") }}</td>
                <td class="">
                  {{
                    order.qualityInspectionType == 40
                      ? $t("submitOrder.基础检验服务说明")
                      : $t("submitOrder.功能检查服务说明")
                  }}
                </td>

                <td class="">
                  <div class="flex justify-end pr-[30px]">
                    <money
                      v-if="computedFase2Amount()"
                      :money="order.qualityInspectionFee / 100"
                      :is-cny="false"
                      :rate="order.currencyRate"
                    ></money>
                    <div v-else>
                      <template v-if="order.status == 7">-</template>
                      <template v-else>{{ $t("orderStatus.待审核") }}</template>
                    </div>
                  </div>
                </td>
              </tr>
              <tr class="">
                <td class="text-center">{{ $t("common.国际运输服务") }}</td>
                <td class="">
                  {{ $t("common.国际运输服务费用说明") }}
                </td>
                <td class="">
                  <div class="flex justify-end pr-[30px]">
                    <money
                      v-if="computedFase2Amount()"
                      :money="order.clearanceFee / 100"
                      :is-cny="false"
                      :rate="order.currencyRate"
                      :surcharge="order.overseasExpressFee / 100"
                    ></money>
                    <div v-else>
                      <template v-if="order.status == 7">-</template>
                      <template v-else>{{ $t("orderStatus.待审核") }}</template>
                    </div>
                  </div>
                </td>
              </tr>

              <tr class="">
                <td class="!p-0 text-center" colspan="2">
                  <div
                    class="p-[30px] text-right text-[18px] text-[--main-color] font-normal"
                  >
                    {{ $t("common.实际付款") }}
                  </div>
                </td>

                <td class="">
                  <div class="flex justify-end pr-[30px]">
                    <money
                      v-if="computedFase2Amount()"
                      class="text-[--main-color] font-normal"
                      :money="
                        order.clearanceFee / 100 +
                        order.qualityInspectionFee / 100 +
                        order.insurance / 100
                      "
                      :is-cny="false"
                      :rate="order.currencyRate"
                      :surcharge="order.overseasExpressFee / 100"
                    ></money>
                    <div v-else>
                      <template v-if="order.status == 7">-</template>
                      <template v-else>{{ $t("orderStatus.待审核") }}</template>
                    </div>
                  </div>
                </td>
              </tr>
            </tbody>
          </n-table>
        </div>
      </template>
    </div>
    <payLoadingDialog ref="payLoadingDialogRef" v-model:progressModal="progressModal">
    </payLoadingDialog>
  </div>
</template>

<script setup>
import { ref } from "vue";
import { useRoute, useRouter } from "vue-router";
import { getDetail, cancelOrder, getLogisticsInfo, confirmOrder } from "@/api/order";
import tableGoods from "@/components/tableGoods.vue";
import {
  ORDER_STATUS,
  firstStepWaitPay,
  firstStepPaied,
  secondStepWaitPay,
  secondStepPaied,
  goArtical,
} from "@/utils/common";
import {
  Time,
  LicenseDraft,
  DeliveryTruck,
  Purchase,
  EarthAmericasFilled,
  Task,
  UserFilled,
  LocationFilled,
} from "@vicons/carbon";
import dayjs from "dayjs";
import money from "@/components/money.vue";
import payLoadingDialog from "@/components/payLoadingDialog.vue";
import messageDialog from "@/components/messageDialog.vue";
const messageDialogRef = ref();
const route = useRoute();
const router = useRouter();
const id = route.params.id;
const order = ref({});
const goodsList = ref();
const address = ref();
const logs = ref([]);
const progressModal = ref({
  orderId: "",
  loading: false,
  show: false,
  message: "",
});
const payLoadingDialogRef = ref();
const getOrder = async () => {
  const { data } = await getDetail(id);
  order.value = data.data;
  address.value = order.value.clientAddress ? JSON.parse(order.value.clientAddress) : {};
  let _goodsList = [];
  for (let i = 0; i < order.value.subOrders.length; i++) {
    const element = order.value.subOrders[i];
    for (let j = 0; j < element.items.length; j++) {
      const e = element.items[j];
      _goodsList.push(e);
    }
  }
  goodsList.value = _goodsList;

  const { data: logData } = await getLogisticsInfo(id);
  logs.value = logData.data;
};

getOrder();

const onClickPayOrder = async (second) => {
  progressModal.value.show = true;
  progressModal.value.orderId = order.value.id;
  await payLoadingDialogRef.value.payOrder(second);
};

const onClickCancelOrder = async () => {
  await cancelOrder(order.value.id);
  location.reload();
};

/**
 * 二阶段费用是否已确认
 */
const computedFase2Amount = () => {
  return secondStepPaied(order.value.status) || secondStepWaitPay(order.value.status);
};

const confirmOrderHandler = async () => {
  await confirmOrder(order.value.id);
  location.reload();
};
</script>

<style lang="scss" scoped>
.step-wrapper {
  flex: 1;
  display: flex;
  color: #303030;
  .step-item {
    flex: 1;
    display: flex;
    position: relative;
    .step-item-wrapper {
      text-align: center;
      flex: 1;
      .time {
        color: #303030;
        font-weight: 300;
        font-size: 14px;
      }
    }
    .line {
      flex: 1;
      border-top: 4px dotted #d8d8d8;
      height: 1px;
      margin-top: 8px;
      position: absolute;
      width: 70%;
      left: 66%;
    }

    &.active {
      i {
        color: var(--main-color);
      }
      .line {
        border-color: var(--main-color);
      }
    }
  }

  .step-item:last-child {
    .line {
      border: 0;
      display: none;
    }
  }
}

.timeline-wrapper {
  color: #303030;
  font-size: 14px;
  font-weight: 300;
  .timeline-item:first-child {
    > div:last-child {
      &::after {
        content: " ";
        position: absolute;
        width: 10px;
        height: 6px;
        background: white;
        left: -6px;
        top: 0px;
      }
    }
  }
  .timeline-item {
    display: flex;
    gap: 20px;
    > div:first-child {
      width: 160px;
      text-align: right;
    }
    > div:last-child {
      padding-left: 20px;
      text-align: left;
      border-left: 2px dashed var(--main-color);
      position: relative;
      padding-bottom: 20px;
      flex: 1;
      &::before {
        content: " ";
        position: absolute;
        width: 8px;
        height: 8px;
        border-radius: 100%;
        background: var(--main-color);
        left: -5px;
        top: 6px;
      }
    }
    .line {
      width: 2px;
      background: red;
      border-left: 1px solid #e5e5e5;
      height: 10px;
      display: none;
    }
    &:last-child {
      > div:last-child {
        padding-left: 20px;
        text-align: left;
        border-left: 2px dashed #fff;
        position: relative;
        padding-bottom: 0px;
        flex: 1;
      }
    }
  }
}

// .amount-wrapper {
//   > div {
//     gap: 16px;
//     font-size: 18px;
//     font-weight: 300;
//     display: flex;
//     margin-top: 8px;
//     &:first-child {
//       margin-top: 0;
//     }
//     > div:first-child {
//       text-align: right;
//       font-size: 18px;
//       font-weight: 300;
//     }
//     > div:last-child {
//       width: 120px;
//       display: flex;
//       justify-content: flex-end;
//     }
//   }
// }

.table-wrapper {
  thead {
    th {
      background-color: var(--sub-color);
      color: white;
      text-align: center;
      height: 32px;
      padding: 0;
    }
  }

  tr td {
    border-top: 1px solid #efeff5;
  }
  tr:first-child td {
    border: 0;
  }
}

.left-wrapper {
  position: relative;
  &::before {
    content: " ";
    position: absolute;
    right: -9px;
    top: -8px;
    width: 16px;
    height: 16px;
    background-color: #f6f6f6;
    border-radius: 100%;
  }
  &::after {
    content: " ";
    position: absolute;
    right: -9px;
    bottom: -8px;
    width: 16px;
    height: 16px;
    background-color: #f6f6f6;
    border-radius: 100%;
  }
}

.box {
  border-bottom: 4px dashed #f6f6f6;
  position: relative;
  &::before {
    position: absolute;
    content: " ";
    width: 100%;
    top: 0;
    height: 4px;
    background-color: var(--main-color);
  }
}
</style>
